<template>
    <div class="wraps">
        <div><span>抬头名称：</span><input type="text" v-model="value.name"></div>
        <div><span>税号：</span><input type="text" v-model="value.id"></div>
        <div><span>邮箱：</span><input type="text" v-model="value.email"></div>
        <div class="switchbox"><span>设为默认邮箱</span><span class="switch"><b id="ball"  ></b></span></div>
        <button @click="submit">保存</button>
    </div>
</template>
<script>
import {mapActions} from 'vuex'
import {addItem} from "../api"
export default {
    data(){
        return{
            value:{
                name:'',
                id:'',
                email:'',
                ischeck:false
            }
        }
    },
    computed:{
        ...mapActions(['addItem'])
    },
    methods:{
        // switchball(){
        //     ischeck=!ischeck
        // }
        // :class="ischeck?'active':''"
        // @click="switchball"
        submit(){
            addItem(this.value)
        }

    },
    
}
</script>
<style lang="scss" scoped>
    .wraps{
        width: 100%;
        div{
            width:100%;
            height: 45px;
            background: #fff;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px ;
            input{
                border: none;
                outline: none;
            }
            
        }
        .switchbox{
                .switch{
                    width: 60px;
                    height: 30px;
                    background:dodgerblue;
                    border-radius: 25px;
                    position: relative;
                    #ball{
                        width: 30px;
                        height: 30px;
                        background: #fff;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        &.active{
                            left: 30px;
                        }
                    }
                }
            }
    }
</style>